<template>
	<view>
		<view class="container">
			<headerView :title='title' :backBtn="true"></headerView>
			<image class="backImage" src="http://139.159.229.212:8889/index/fujiajia/矩形111.png" mode="widthFix">
			</image>

			<view class="content">
				<image class="invit-image" src="http://139.159.229.212:8889/index/fujiajia/_编组_.png" mode=""></image>
				<view class="code">
					<view class="">您的邀请码是</view>
					<view class="">{{invite_code}}</view>
					<view class="copy" @tap="copy">复制</view>
				</view>
				<view class="code-image">
					<image :src="qrcode" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { save } from '@/common/upload.js'
	import user from '@/api/user.js'
	import headerView from "../components/header/header.vue"

	export default {
		components: {
			headerView
		},
		data() {
			return {
				title: "邀请码",
				invite_code: '',
				qrcode: '',
			}
		},
		onLoad() {
			this.getWeappQrcode();
		},
		methods: {
			async getWeappQrcode() {
				user.weappQrcode().then(res => {
					if (res.code === 1) {
						this.invite_code = res.data.invite_code;
						this.qrcode = res.data.qrcode;
					} else {
						this.toast(res.msg)
					}
				})
			},
			async save() {
				if (!this.qrcode) {
					this.toast('保存失败，暂无邀请码');
					return;
				}
				save(this.qrcode);
			},
			async copy() {
				if (!this.invite_code) {
					this.toast('复制失败，暂无邀请码');
					return;
				}
				uni.setClipboardData({
					data: this.invite_code
				}).then(res => {
					const [error, data] = res;
					if (!error) {
						this.toast('复制成功');
					} else {
						console.error(error);
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.backImage {
		width: 100%;
		position: absolute;
		left: 0%;
	}

	.content {
		display: flex;
		justify-content: center;
		width: 688rpx;
		height: 1267rpx;
		margin: auto;
		position: relative;
	}

	.invit-image {
		width: 688rpx;
		height: 1267rpx;
		margin: auto;
	}

	.code {
		position: absolute;
		color: #eeeeee;
		top: 10%;
		text-align: center;

		view {
			padding: 20rpx 0;
			font-size: 32rpx;
		}

		.copy {
			margin-top: 20rpx;
			border: 2rpx solid #fff;
			border-radius: 100rpx;
			padding: 10rpx;
		}
	}

	.code-image {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		top: 47%;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
